<template>
  <el-tooltip
    :effect="options&&options.effect?options.effect:'dark'"
    :content="isFullScreen?'退出全屏':'进入全屏'"
    :disabled="options&&options.disabled?options.disabled:false"
    :placement="options&&options.placement?options.placement:'bottom'"
  >
    <span
      :class="isFullScreen?'isFullScreen iconfont icon-tuichuzhuanhuan':'isFullScreen iconfont icon-quanping'"
      @click="fullScreen"
    >
    </span>
  </el-tooltip>
</template>

<script>
  /*
  全屏组件
  options: {参数配置,不必填
     effect: '',string类型,提供的主题(dark/light),默认 'dark'
     disabled: disabled,//boolean值,是否禁用,默认 disabled
     placement:string类型,Tooltip 的出现位置,可选值见elementUI的Tooltip组件,默认 'bottom'
  }
*/
  export default {
    name: "FullScreen",
    props: {
      options: {//按钮配置
        type: Object,
        required: false
      },
    },
    data() {
      return {
        isFullScreen: false,//是否全屏
      }
    },
    mounted() {
      this.watchFullScreen();
    },
    methods: {
      fullScreen() {
        if (!this.isFullScreen) {
          this.requestFullScreen();
        }
        else {
          this.exitFullscreen();
        }
        this.isFullScreen = !this.isFullScreen;
      },
      //进入全屏
      requestFullScreen() {
        let dom = document.documentElement;
        if (dom.requestFullscreen) {
          dom.requestFullscreen();
        }
        else if (dom.mozRequestFullScreen) {
          dom.mozRequestFullScreen();
        }
        else if (dom.webkitRequestFullScreen) {
          dom.webkitRequestFullScreen();
        }
      },
      //退出全屏
      exitFullscreen() {
        let dom = document;
        if (dom.exitFullscreen) {
          dom.exitFullscreen();
        }
        else if (dom.mozCancelFullScreen) {
          dom.mozCancelFullScreen();
        }
        else if (dom.webkitCancelFullScreen) {
          dom.webkitCancelFullScreen();
        }
      },
      //监听fullscreenchange事件
      watchFullScreen() {
        const _self = this;
        document.addEventListener("fullscreenchange", function () {
          let isFull = document.fullscreenElement || document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || false;
          _self.isFullScreen = isFull !== false;
        }, false);
        document.addEventListener("mozfullscreenchange", function () {
          let isFull = document.fullscreenElement || document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || false;
          _self.isFullScreen = isFull !== false;
        }, false);
        document.addEventListener("webkitfullscreenchange", function () {
          let isFull = document.fullscreenElement || document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || false;
          _self.isFullScreen = isFull !== false;
        }, false);
        document.addEventListener("msfullscreenchange", function () {
          let isFull = document.fullscreenElement || document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || false;
          _self.isFullScreen = isFull !== false;
        }, false);
      }
    }
  }
</script>

<style scoped>
  .isFullScreen {
    cursor: pointer;
    margin-right: 8px;
    font-size: 18px;
    font-weight: bold;
    outline: none;
    text-decoration: none;
    border: none;
  }
</style>
